<template>
  <div
    class="site-wrapper"
    :class="{ 'site-sidebar--fold': sidebarFold }"
    v-loading.fullscreen.lock="loading"
    element-loading-text="拼命加载中">
    <template v-if="!loading">
      <main-navbar />
      <main-sidebar />
      <div class="site-content__wrapper" :style="{ 'min-height': documentClientHeight + 'px' }">
        <main-content />
      </div>
    </template>
  </div>
</template>

<script lang="ts" setup>
  import { 
    ref,
    computed,
    onMounted
   } from 'vue';
  import { usecommonStore } from '../store/modules/common';
  import MainNavbar from './main-navbar.vue'
  import MainSidebar from './main-sidebar.vue'
  import MainContent from './main-content.vue'
  
  const store = usecommonStore()
  let loading = ref(false)
  
  // 浏览器可视高度
  let documentClientHeight = computed({
    get: () => { return store.documentClientHeight },
    set: (val) => { store.updateDocumentClientHeight(val) }
  })
  let sidebarFold = computed({
    get: () => { return store.sidebarFold },
    set: (val) => { store.updateSidebarFold(val) }
  })

  onMounted(() => {
    resetDocumentClientHeight();
  })

  // 重置窗口可视高度
  function resetDocumentClientHeight () {
    documentClientHeight.value = `${window.innerHeight}` || `${document.documentElement.clientHeight}`;
    window.onresize = () => {
      documentClientHeight.value = `${window.innerHeight}` || `${document.documentElement.clientHeight}`;
    }
  }
   
</script>
